<template>
	<!-- vue content -->
	<view class="ver common-body " style="background: #edf3f1;position: relative">
		<bodyCustom title="队站开放及站内公益培训">
			<view class="pd-lr25 pd-t20">
				<view class=" match-width" style="">
					<view class="hor ver-center match-width">
						<view class="ver ver-center" @click="onClickType(1)">
							<view class="font16 "
								:class="{'font-color-main':type==1,'font-text-color-explain':type!=1,'uni-bold':type==1}">
								队站开放</view>
							<view style="height: 2px;width: 70rpx" class="bg-main mg-t-5 corner10" v-if="type==1">
							</view>
						</view>
						<view class="ver ver-center mg-l-40" @click="onClickType(2)">
							<view class="font16 "
								:class="{'font-color-main':type==2,'font-text-color-explain':type!=2,'uni-bold':type==2}">
								公益培训</view>
							<view style="height: 2px;width: 70rpx" class="bg-main mg-t-5 corner10" v-if="type==2">
							</view>
						</view>
						<view class="flex1"></view>
						<image src="../../static/img/ic_row.png" style="height: 50rpx;width: 50rpx;" v-if="rowType==1"
							@click="rowType=2">
						</image>
						<image src="../../static/img/ic_row2.png" style="height: 50rpx;width: 50rpx;" v-if="rowType==2"
							@click="rowType=1">
						</image>
					</view>

					<view v-if="type==1">
						<view v-if="rowType==1">
							<view class="ver match-width corner20 bg-white pd-b20 mg-t-20"
								v-for="(item, index) in allList" :index="index" :key="index"
								@click.stop="onClickItem(item,index)" style="position: relative;">
								<view class="corner20" style="">
									<image :src="item.gateUrl" style="height: 200rpx;" class="corner20-t match-width"
										mode="aspectFill">
									</image>
									<view class="font-color-white hor hor-center "
										style="position: absolute;left: 0;top: 0;">
										<view class="bg-green corner20-lr text-center font12 pd-lr25" style=";"
											v-if="item.orderStatus==1">
											已预约</view>
										<view class="bg-green corner20-lr  text-center font12 pd-lr25" style=""
											v-if="item.orderStatus==2">可预约
										</view>
										<view class="bg-gray corner20-lr  text-center font12 pd-lr25" style=""
											v-if="item.orderStatus==3">
											已约满</view>
										<view class="bg-gray corner20-lr  text-center  font12 pd-lr25" style=";"
											v-if="item.orderStatus==4">
											已结束
										</view>
									</view>
								</view>

								<view class="pd-lr25">
									<view class="line2 flex1 uni-bold font16 mg-t-10" style="line-height: 1;">
										{{item.stationName}}
									</view>
									<view class="line2 font-text-color-main_body mg-t-20 " style="">
										<image src="../../static/img/ic_location.png"
											style="height: 25rpx;width: 25rpx;">
										</image>
										<span class="mg-l-10">{{item.stationAddress}}</span>
									</view>
									<view class="divider-hor mg-t-10"></view>
									<view class="font14 font-text-color-main_body mg-t-20" style="line-height: 1;">于
										{{item.showTime}}
										开始
									</view>
									<view class="mg-t-10 font14 font-text-color-main_body">
										最大接待人数：{{item.quantity+item.extraQuantity}}人
									</view>
									<view class="hor ver-center">
										<view class="font14 font-color-green flex1">
											剩余可接待：{{item.quantity+item.extraQuantity-item.orderQuantity}}人</view>
										<view class="bg-green pd-lr30 pd-tb5 font-color-white corner10"
											v-if="item.orderStatus==2">预约</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 列表式 -->
						<view v-if="rowType==2">
							<view class="ver match-width corner20 bg-white mg-t-20 pd-lr25 pd-tb25"
								v-for="(item, index) in allList" :index="index" :key="index"
								@click="onClickItem(item,index)" style="position: relative;">

								<view class="hor ver-center">
									<view class="line2 flex1 uni-bold font16 mg-t-10" style="line-height: 1;">
										{{item.stationName}}
									</view>
									<view class="font-color-white hor hor-center corner10" style="">
										<view class="bg-green  text-center font12 pd-lr25 corner10 pd-tb5" style=";"
											v-if="item.orderStatus==1">
											已预约</view>
										<view class="bg-green   text-center font12 pd-lr25 corner10  pd-tb5" style=""
											v-if="item.orderStatus==2">可预约
										</view>
										<view class="bg-gray   text-center font12 pd-lr25 corner10  pd-tb5" style=""
											v-if="item.orderStatus==3">
											已约满</view>
										<view class="bg-gray   text-center  font12 pd-lr25 corner10  pd-tb5" style=";"
											v-if="item.orderStatus==4">
											已结束
										</view>
									</view>
								</view>

								<view class="bg-common match-width hor ver-center mg-t-40 corner5">
									<view class="flex1 text-center pd-tb10">
										<view class="font-text-color-explain">开放时间</view>
										<view class="font-text-color-black"> {{item.showTime}} </view>
									</view>
									<view class="flex1 text-center pd-tb10">
										<view class="font-text-color-explain">人数</view>
										<view class="font-text-color-black">
											{{item.orderQuantity}}/{{item.quantity+item.extraQuantity}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="type==2">
						<view v-if="rowType==1">
							<view class="ver match-width corner20 bg-white pd-b20 mg-t-20"
								v-for="(item, index) in allList" :index="index" :key="index"
								@click="onClickItem(item,index)" style="position: relative;">
								<view class="corner20" style="">
									<image :src="item.lessonPic" style="height: 200rpx;" class="corner20-t match-width"
										mode="aspectFill">
									</image>

									<view class="font-color-white hor hor-center "
										style="position: absolute;left: 0;top: 0;">
										<view class="bg-green corner20-lr text-center font12 pd-lr25" style=";"
											v-if="item.orderStatus==1">
											已预约</view>
										<view class="bg-green corner20-lr  text-center font12 pd-lr25" style=""
											v-if="item.orderStatus==2">可预约
										</view>
										<view class="bg-gray corner20-lr  text-center font12 pd-lr25" style=""
											v-if="item.orderStatus==3">
											已约满</view>
										<view class="bg-gray corner20-lr  text-center  font12 pd-lr25" style=";"
											v-if="item.orderStatus==4">
											已结束
										</view>
									</view>
								</view>

								<view class="pd-lr25">
									<view class="line2 flex1 uni-bold font16 mg-t-10" style="line-height: 1;">
										{{item.lessonName}}
									</view>
									<view class="line2 font-text-color-main_body mg-t-20 " style="">
										<image src="../../static/img/ic_location.png"
											style="height: 25rpx;width: 25rpx;">
										</image>
										<span class="mg-l-10">{{item.trainAddress}}</span>
									</view>
									<view class="hor ver-center mg-t-10">
										<image :src="item.teacherPhoto" style="height: 80rpx;width: 80rpx;"
											class="corner10 bg-common" mode="aspectFill"></image>
										<view class="mg-l-20 font-text-color-explain">
											<view class="font12">{{item.teacherName}}</view>
											<view class="font12">{{item.brigadeName}}</view>
										</view>
									</view>

									<view class="divider-hor mg-t-10"></view>
									<view class="font14 font-text-color-main_body mg-t-20" style="line-height: 1;">于
										{{item.showTime}}
										开始
									</view>
									<view class="mg-t-10 font14 font-text-color-main_body">
										最大接待人数：{{item.quantity+item.extraQuantity}}人
									</view>
									<view class="hor ver-center">
										<view class="font14 font-color-green flex1">
											剩余可接待：{{item.quantity+item.extraQuantity-item.orderQuantity}}人</view>
										<view class="bg-green pd-lr30 pd-tb5 font-color-white corner10"
											v-if="item.orderStatus==2">预约</view>
									</view>
								</view>

							</view>
						</view>

						<view v-if="rowType==2">
							<view class="ver match-width corner20 bg-white mg-t-20 pd-lr25 pd-tb25"
								v-for="(item, index) in allList" :index="index" :key="index"
								@click="onClickItem(item,index)" style="position: relative;">

								<view class="hor ver-center">
									<view class="line2 flex1 uni-bold font16 mg-t-10" style="line-height: 1;">
										{{item.lessonName}}
									</view>
									<view class="bg-common  font-color-white hor hor-center corner10" style="">
										<view class="bg-green  text-center font12 pd-lr25 corner10 pd-tb5" style=";"
											v-if="item.orderStatus==1">
											已预约</view>
										<view class="bg-green   text-center font12 pd-lr25 corner10  pd-tb5" style=""
											v-if="item.orderStatus==2">可预约
										</view>
										<view class="bg-gray   text-center font12 pd-lr25 corner10  pd-tb5" style=""
											v-if="item.orderStatus==3">
											已约满</view>
										<view class="bg-gray   text-center  font12 pd-lr25 corner10  pd-tb5" style=";"
											v-if="item.orderStatus==4">
											已结束
										</view>
									</view>
								</view>

								<view class="bg-common match-width hor ver-center mg-t-40 corner5">
									<view class="flex1 text-center pd-tb10">
										<view class="font-text-color-explain">地区</view>
										<view class="font-text-color-black"> {{item.distinctName}} </view>
									</view>
									<view class="flex1 text-center pd-tb10">
										<view class="font-text-color-explain">开放时间</view>
										<view class="font-text-color-black"> {{item.showTime}} </view>
									</view>
									<view class="flex1 text-center pd-tb10">
										<view class="font-text-color-explain">人数</view>
										<view class="font-text-color-black">
											{{item.orderQuantity}}/{{item.quantity+item.extraQuantity}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>


					<!-- 	<view class="ver match-width" v-for="(item, index) in allList" :index="index" :key="index"
						@click="onClickItem(item,index)">
						<view style="height: 1px;width: 100%;" class="bg-black"></view>
						<view style="position: relative;"
							class="font12 hor ver-center bg-common match-width text-center font-text-color-main_body pd-tb10">
							<view class="bg-common " style="width: 100rpx;line-height: 1;">{{item.showTime}}
							</view>
							<view class="bg-common line2" style="width: 110rpx;">{{item.distinctName}}</view>
							<view class="bg-common line2 flex1" style="line-height: 1;">{{item.lessonName}}
							</view>
							<view class="bg-common line2" style="width: 80rpx;"
								:class="{'font-text-color-main_body':item.orderQuantity<item.quantity,'font-color-red':item.orderQuantity>=item.quantity}">
								{{item.orderQuantity}}/{{item.quantity}}
							</view>
							<view class="bg-common  font-color-white hor hor-center " style="width: 110rpx;">
								<view class="bg-blue corner10" style="width: 100rpx;" v-if="item.orderStatus==1">
									已预约</view>
								<view class="bg-main corner10" style="width: 100rpx;" v-if="item.orderStatus==2">可预约
								</view>
								<view class="bg-gray-dark corner10" style="width: 100rpx;" v-if="item.orderStatus==3">
									已约满</view>
								<view class="bg-green corner10" style="width: 100rpx;" v-if="item.orderStatus==4">
									已结束
								</view>
							</view>
						</view>
					</view> -->

				</view>
				<view class="" style="height: 10vh;"></view>
				<empty-layout id="empty" offsetTop="400rpx" :emptyStatus="emptyStatus" positionMode="1" v-if="emptyShow"
					emptyHint="暂无可预约课程" @retry="onRefresh">
				</empty-layout>
			</view>
		</bodyCustom>
	</view>
</template>

<script>
	let _this
	export default {
		components: {},
		data() {
			return {
				contentHeight: 0,
				contentWidth: 0,
				emptyShow: false,
				emptyStatus: 1,
				emptyHint: "",
				authUser: null,
				auditStatus: 0,
				platform: 0,
				titleHeight: 0,

				type: 1, //1队站参观体验  2.公益培训授课
				rowType: 1, //1.卡片式 2.列表式

				page: 1,
				size: 20,
				allList: [],
				isLoading: false, //是否加载中
				canLoadMore: true, //是否能加载更多

			}
		},
		onLoad(option) {
			_this = this;
			this.initUser(option, this, false);
			this.inviteUserId = option.inviteUserId

			//获取屏幕高度及比例
			var winInfo = uni.getSystemInfo({
				success: function(res) {
					var windowHeight = res.windowHeight;
					var windowWidth = res.windowWidth;
					_this.contentHeight = windowHeight;
					_this.contentWidth = windowWidth

					_this.bottomHeight = _this.contentHeight - uni.upx2px(120)
					// console.log(res)

					_this.titleHeight = res.statusBarHeight + uni.upx2px(70)
					// console.log(_this.titleHeight)


					// console.log("状态栏高度", res.statusBarHeight)
					// console.log("导航栏高度", res.navigationBarHeight)
					// console.log("标题栏高度", res.titleBarHeight)
					// console.log("可使用顶部位置", res.windowTop)
					// console.log("底部高度", res.windowTop)

					// _this.statusbarHeight = res.windowTop

				}
			});


		},
		onUnload() {
			console.log("卸载")
		},
		onShow() {
			this.initUser(null, this, false);
			this.onRefresh()
		},
		onPageScroll(res) {
			// console.log("页面滚动了")
			uni.$emit('onPageScroll', res.scrollTop);
		},
		onReachBottom() {
			console.log("onReachBottom");
			if (this.isLoading) {
				return
			}
			if (!this.canLoadMore) {
				return
			}
			this.page++;
			this.getData()
		},
		methods: {
			onPullDownRefresh() {
				// if (this.platform == 6) {
				// 	uni.redirectTo({
				// 		url: "taskList"
				// 	})
				// } else {
				this.page = 1;
				this.getData()
				// }
			},
			onRefresh() {
				this.page = 1;
				this.getData()
			},
			getData() {
				let url = ""
				let data = {
					pageNum: this.page,
					pageSize: this.size
				};
				if (this.type == 1) {
					if (this.authUser == null || this.authUser.customerId == null) {
						url = "lessonOrder/listStationOpenFromWx";
					} else {
						url = "orderRecord/listNotVisitOrderByOpenId"
						// data['trainType'] = 2
					}
				} else {
					if (this.authUser == null || this.authUser.customerId == null) {
						url = "lessonOrder/listFromWx"
					} else {
						url = "orderRecord/listNotOrderByOpenId"
						data['trainType'] = 1
					}
				}

				this.sendRequest({
					url: url,
					data: data,
					method: "GET",
					page: _this,
					success: function(res) {
						uni.stopPullDownRefresh();
						_this.emptyShow = false;
						_this.isLoading = false;

						const list = res.data.records;
						for (var i = 0; i < list.length; i++) {
							if (_this.isEmpty(list[i].gateUrl)) {
								list[i].gateUrl = "https://cdxf.5gsxt.cn/images/fo/lesson_img@3x.jpg"
							}
							if (_this.isEmpty(list[i].lessonPic)) {
								list[i].lessonPic = "https://cdxf.5gsxt.cn/images/fo/lesson_img@3x.jpg"
							}
						}

						if (_this.page == 1) {
							_this.allList.splice(0, _this.allList.length)
						}

						for (var i = 0; i < list.length; i++) {
							_this.allList.push(list[i])
						}
						if (list != null && list.length >= _this.size) {
							_this.canLoadMore = true;
						} else {
							_this.canLoadMore = false;
						}
						if (_this.page == 1 && _this.allList.length == 0) {
							_this.emptyShow = true;
							_this.emptyStatus = 2;
						}
						// console.log(_this.allList)

					},
					codeFail: function(e) {
						uni.stopPullDownRefresh();
						_this.isLoading = false;
						_this.emptyShow = true;
						_this.emptyStatus = 1;
					},
					fail: function(e) {
						uni.stopPullDownRefresh();
						_this.isLoading = false;
						_this.emptyShow = true;
						_this.emptyStatus = 1;
					}
				})
			},
			requestSub() {
				uni.requestSubscribeMessage({
					tmplIds: ['eehBr0bbd7nnLfUFWeKpa6e87Cj50ygw3zgObVKTlPQ',
						'19ORxXNYLqJ7fDc4FWG33ScuqUmpLTkz5CYoPc2ilhU'
					],
					success(res) {


					}
				})
			},
			onClickYuYue(item, index) {
				if (!this.initUser(null, this, true)) {
					return
				}
				if (this.platform == 4) {
					this.requestSub()
				}

				uni.showModal({
					title: '提示',
					content: "是否确认预约地址为：" + item.brigadeName + "(" + item.brigadeAddress + ")",
					confirmText: "预约",
					success: function(res) {
						if (res.confirm) {
							_this.sendRequest({
								url: "orderRecord/wxOrder",
								data: {
									openId: uni.getStorageSync('openid'),
									lessonOrderId: item.lessonOrderId,
								},
								method: "POST",
								page: _this,
								success: function(res) {
									uni.showModal({
										title: '提示',
										content: "预约成功",
										confirmText: "我知道了",
										showCancel: false,
										success: function(res) {
											_this.onRefresh()
										}
									});
								},
								fail: function(e) {}
							})
						}

					}
				});

			},
			onClickItem(item, index) {
				if (this.type == 1) {
					uni.navigateTo({
						url: "/pages/lesson/lessonZNYY?lessonOrderId=" + item.lessonOrderId
					})
				} else {
					uni.navigateTo({
						url: "/pages/lesson/lessonDetail?lessonOrderId=" + item.lessonOrderId
					})
				}

			},
			onClickType(type) {
				this.type = type

				this.page = 1
				this.allList = []
				this.getData();
			}

		}
	}
</script>

<style>
	html,
	body,
	page {
		width: 100%;
		height: 100%;
		background-color: #edf3f1;
	}

	.u-fixed-b {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 24rpx;
		padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		z-index: 50;
	}

	.body-bg {
		/* 设置容器尺寸 - 原理1 */
		/* 背景渐变色 - 原理2 */
		background: linear-gradient(0deg, #e1cdf2, #edeaff, #c2edf5);
		/* 背景尺寸 - 原理3 */
		background-size: 100% 100%;
	}


	.gradient1 {
		/* 设置容器尺寸 - 原理1 */
		/* 背景渐变色 - 原理2 */
		background: linear-gradient(-45deg, #eeb354, #e742c4, #2cd589, #3970d5);
		/* 背景尺寸 - 原理3 */
		background-size: 600% 600%;
		/* 循环动画 - 原理4 */
		animation: gradientBG 4s ease infinite;
	}

	.gradient2 {
		/* 设置容器尺寸 - 原理1 */
		/* 背景渐变色 - 原理2 */
		background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
		/* 背景尺寸 - 原理3 */
		background-size: 600% 600%;
		/* 循环动画 - 原理4 */
		animation: gradientBG 4s ease infinite;
	}

	/* 动画，控制背景 background-position */
	@keyframes gradientBG {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}

	.gap {
		height: 1px;
		background-color: #f1f1f1;
	}

	.black-gradient-ver {
		background-image: linear-gradient(transparent, #ffffff);
	}

	.bg-gradient-blue1 {
		/* 设置容器尺寸 - 原理1 */
		/* 背景渐变色 - 原理2 */
		background: linear-gradient(90deg, #2b35ff, #8f95ff);
		/* 背景尺寸 - 原理3 */
		background-size: 200% 200%;
		/* 循环动画 - 原理4 */
		// animation: gradientBG 2s ease infinite;
	}

	.bg-gradient-blue2 {
		/* 设置容器尺寸 - 原理1 */
		/* 背景渐变色 - 原理2 */
		background: linear-gradient(90deg, #6e25ff, #9361ff);
		/* 背景尺寸 - 原理3 */
		background-size: 200% 200%;
		/* 循环动画 - 原理4 */
		// animation: gradientBG 2s ease infinite;
	}

	.bg-gradient-blue3 {
		/* 设置容器尺寸 - 原理1 */
		/* 背景渐变色 - 原理2 */
		background: linear-gradient(90deg, #238dff, #50a5ff);
		/* 背景尺寸 - 原理3 */
		background-size: 200% 200%;
		/* 循环动画 - 原理4 */
		// animation: gradientBG 2s ease infinite;
	}
</style>